---
layout: ../layouts/HomeLayout.astro
title: villus
description: A small and fast GraphQL client for Vue.js
home: true
features:
  - title: ⚡️ Fast
    details: Small API footprint with tiny bundle size < 4kb to make your apps load faster
  - title: 📦 Cache-Ready
    details: Reasonable caching behavior out of the box which can be adjusted per query
  - title: 👕 TypeScript
    details: Written in TypeScript and supports Typed query Responses and variables
  - title: ☢️ Reactive
    details: Write reactive queries/variables with the composition API
  - title: 🚟 Suspense API
    details: Supports the <Suspense /> component API out of the box
---

## Sponsors

Thanks for the following companies and individuals who are supporting villus

<br />

<a href="https://github.com/sponsors/logaretm">
  <img src="https://sponsors.logaretm.com/sponsors.svg" />
</a>

<br />

<br />

You can also help this project and my other projects by donating one time or by sponsoring via the following link

<br />

<div class="flex items-center justify-center">
  <sponsor-button></sponsor-button>
</div>

<br />

## Quick Start

First, install `villus`

yarn

```sh
yarn add villus graphql
```

npm

```sh
npm install villus graphql --save
```

### Usage

Configure the GraphQL client for your root component:

```vue
<script setup>
import { useClient } from 'villus';

useClient({
  url: 'http://localhost:3002/graphql',
});
</script>
```

Then you can use `useQuery` in any child component:

```vue
<template>
  <div>
    <div v-if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script setup>
import { useQuery } from 'villus';

const { data } = useQuery({
  query: '{ posts { title } }',
});
</script>
```
